<template>
    <div class="workBoard">
        <div class="left">
            <div class="left_left">
                <div class="header">施工管理</div>
                <div class="left_container_top">
                    <div class="container_box">
                        <div class="left_container_top_left">
                            <div class="box">临补计划</div>
                            <div class="box_container">
                                <div class="box_container_box">
                                    <div class="top">0</div>
                                    <div class="bottom">临补任务</div>
                                </div>
                            </div>
                        </div>
                        <div class="left_container_top_center">
                            <div class="box">月度计划</div>
                            <div class="box_container">
                                <div class="box_container_box">
                                    <div class="top">51</div>
                                    <div class="bottom">本周任务</div>
                                </div>
                                <div class="box_container_box">
                                    <div class="top">0</div>
                                    <div class="bottom">今日任务</div>
                                </div>
                            </div>
                        </div>
                        <div class="left_container_top_right">
                            <div class="box">周计划</div>
                            <div class="box_container">
                                <div
                                    class="box_container_box"
                                    :style="{ color: '#57f2ad' }"
                                >
                                    <div class="top">51</div>
                                    <div class="bottom">本周已完成</div>
                                </div>
                                <div class="box_container_box">
                                    <div class="top">0</div>
                                    <div class="bottom">今日待任务</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div
                            :class="{
                                list_item: true,
                                active: active === index,
                            }"
                            v-for="(item, index) in data"
                            :key="index"
                            @click="active = index"
                        >
                            {{ item }}
                        </div>
                    </div>
                </div>

                <div class="header">隐患排查</div>

                <div class="left_container_bottom">
                    <div class="common_header">
                        <div
                            class="item"
                            @click="
                                yhpcVisible = true;
                                yhpcType = 'create';
                            "
                        >
                            新建
                        </div>
                        <div class="item" @click="yhpcListVisible = true">
                            查看
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="table_header">
                            <div class="table_header_left">
                                日期
                            </div>
                            <div class="table_header_center">
                                排查情况
                            </div>
                            <div class="table_header_right">
                                排查人员
                            </div>
                        </div>
                        <div class="table_item" v-for="item in yhpcData">
                            <div class="table_header_left">
                                {{ format(item.time) }}
                            </div>
                            <div class="table_header_center">
                                {{ item.situation }}
                            </div>
                            <div class="table_header_right">
                                {{ item.person }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center_center">
                <div class="header">交接班管理</div>
                <div class="center_container_top">
                    <div class="common_header">
                        <div
                            class="item"
                            @click="
                                jjbglVisible = true;
                                jjbglType = 'create';
                            "
                        >
                            新建
                        </div>
                        <div class="item" @click="jjbglListVisible = true">
                            查看
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="table_header">
                            <div class="table_header_left">
                                日期
                            </div>
                            <div class="table_header_center">
                                交/接班人员
                            </div>
                            <div class="table_header_right">
                                交接班内容
                            </div>
                        </div>
                        <div class="table_item" v-for="item in jjbglData">
                            <div class="table_header_left">
                                {{ format(item.time) }}
                            </div>
                            <div class="table_header_center">
                                {{ `${item.handoverPerson}/${item.successor}` }}
                            </div>
                            <div class="table_header_right">
                                {{ item.content }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header">综合管理</div>
                <div id="main" class="center_container_bottom"></div>
            </div>
        </div>
        <div class="right">
            <div class="right_right">
                <div class="right_container_top">
                    <div class="header">应急管理</div>

                    <div class="right_container_top_top_top">
                        <div class="right_container_top_left">
                            <div class="header">
                                每月应急统计
                            </div>
                            <div
                                class="right_container_top_left_item"
                                v-for="(item, key) in dateMap"
                            >
                                <span>{{ key }}</span>
                                <span>{{ item }}</span>
                            </div>
                        </div>
                        <div class="right_container_top_right">
                            <div class="header">
                                每月应急统计
                            </div>
                            <div class="header">
                                当日应急人员
                            </div>
                            <div class="table_header">
                                <div class="table_header_left">
                                    值班主任/工程师/工班负责人
                                </div>
                                <div class="table_header_right">
                                    联系方式
                                </div>
                            </div>
                            <div
                                class="table_item"
                                v-for="(item, key) in PhoneMap"
                            >
                                <div class="table_header_left">
                                    {{ key }}
                                </div>
                                <div class="table_header_right">
                                    {{ item }}
                                </div>
                            </div>
                            <div class="header">
                                应急处理流程
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right_container_bottom">
                    <div class="right_container_bottom_left">
                        <div class="header">人员管理</div>
                        <div class="cvleft">
                            <div class="tip_header">
                                <div class="tip_header_item">
                                    <span></span>工作任务
                                </div>
                                <div class="tip_header_item">
                                    <span></span>员工素质
                                </div>
                                <div class="tip_header_item">
                                    <span></span>劳动纪律
                                </div>
                                <div class="tip_header_item">
                                    <span></span>安全责任
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">丁一</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">李二</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">张三</div>
                                <div class="cvleft_item_right">
                                    <el-progress :percentage="30"></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="60"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">李四</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">王五</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">丁六</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                            <div class="cvleft_item">
                                <div class="cvleft_item_cvleft">午七</div>
                                <div class="cvleft_item_right">
                                    <el-progress
                                        :percentage="100"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="success"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress>
                                    <el-progress
                                        :percentage="100"
                                        status="exception"
                                    ></el-progress>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right_container_bottom_right">
                        <div class="header">文件学习</div>
                        <div class="right_container_bottom_right_container">
                            <div class="top_header">
                                <i
                                    class="el-icon-notebook-1
"
                                ></i
                                >最近学习文件
                            </div>
                            <div
                                class="top_header_item"
                                v-for="item in bookData"
                            >
                                <div class="top_header_item_img">
                                    <img src="../../assets/file.png" alt="" />
                                </div>
                                <span>{{ item }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <dz-dialog :visible="yhpcVisible" @close="yhpcVisible = false">
            <div class="dialog2">
                <el-form
                    ref="yhpcForm"
                    :model="yhpcForm"
                    label-width="80px"
                    :disabled="yhpcType === 'view'"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="排查时间" required>
                                <el-date-picker
                                    v-model="yhpcForm.time"
                                    format="yyyy-MM-dd HH:mm"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    value-format="yyyy-MM-ddTHH:mm:ss.SSSZ"
                                    :default-value="new Date().toISOString()"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item required label="排查人员">
                                <el-input v-model="yhpcForm.person"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item required label="排查地点">
                                <el-input v-model="yhpcForm.place"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                required
                                label="排查覆盖岗位"
                                label-width="120px"
                            >
                                <el-input
                                    v-model="yhpcForm.coveryJob"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item required label="排查情况">
                            <el-input
                                type="textarea"
                                v-model="yhpcForm.situation"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="隐患信息描述及采取措施"
                            label-width="200px"
                        >
                            <el-input
                                type="textarea"
                                v-model="yhpcForm.measure"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="岗位动态排查隐患汇总"
                            label-width="200px"
                        >
                            <el-input
                                type="textarea"
                                v-model="yhpcForm.summary"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row class="flex">
                        <el-button type="primary" @click="create">
                            {{ yhpcType === "create" ? "新建" : "编辑" }}
                        </el-button>
                        <el-button type="primary" @click="yhpcVisible = false"
                            >取消</el-button
                        >
                    </el-row>
                </el-form>
            </div>
        </dz-dialog>
        <dz-dialog :visible="yhpcListVisible" @close="yhpcListVisible = false">
            <div class="dialog1 table">
                <el-table :data="yhpcData" border stripe width="100%">
                    <el-table-column label="日期" width="180" prop="time">
                        <template slot-scope="{ row }">
                            <span>{{ format(row.time) || "暂无" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排查情况" width="180">
                        <template slot-scope="{ row }">
                            <span>{{ row.situation || "暂无" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop=" time" align="right">
                        <template slot-scope="{ row }">
                            <el-button
                                v-if="
                                    new Date().getTime() -
                                        new Date(format(row.time)).getTime() <=
                                        86400000
                                "
                                type="primary"
                                @click="handleEdit(row)"
                                >编辑</el-button
                            >
                            <el-button type="error" @click="view(row)"
                                >查看</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </dz-dialog>
        <dz-dialog :visible="jjbglVisible" @close="jjbglVisible = false">
            <div class="dialog2">
                <el-form
                    :model="jjbglForm"
                    label-width="60px"
                    :disabled="jjbglType === 'view'"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="时间" required>
                                <el-date-picker
                                    v-model="jjbglForm.time"
                                    format="yyyy-MM-dd HH:mm"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    value-format="yyyy-MM-ddTHH:mm:ss.SSSZ"
                                    :default-value="new Date().toISOString()"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item required label="地点">
                                <el-input v-model="jjbglForm.place"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item required label="天气">
                                <el-select v-model="jjbglForm.weather">
                                    <el-option
                                        v-for="item in weather"
                                        :value="item"
                                        >{{ item }}
                                    </el-option></el-select
                                >
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                required
                                label="交班人"
                                label-width="100px"
                            >
                                <el-input
                                    v-model="jjbglForm.handoverPerson"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                required
                                label="接班人"
                                label-width="100px"
                            >
                                <el-input
                                    v-model="jjbglForm.successor"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="交接班内容"
                            label-width="120px"
                        >
                            <el-input
                                type="textarea"
                                v-model="jjbglForm.content"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="本班次检修作业安排及完成情况"
                            label-width="230px"
                        >
                            <el-input
                                type="textarea"
                                v-model="jjbglForm.finishSituation"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="重点事项宣贯"
                            label-width="120px"
                        >
                            <el-input
                                type="textarea"
                                v-model="jjbglForm.importantThings"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row class="flex">
                        <el-button type="primary" @click="create1">
                            {{ jjbglType === "create" ? "新建" : "编辑" }}
                        </el-button>
                        <el-button type="primary" @click="jjbglVisible = false"
                            >取消</el-button
                        >
                    </el-row>
                </el-form>
            </div>
        </dz-dialog>
        <dz-dialog
            :visible="jjbglListVisible"
            @close="jjbglListVisible = false"
        >
            <div class="dialog1 table">
                <el-table :data="jjbglData" border stripe width="100%">
                    <el-table-column label="日期" width="180" prop="time">
                        <template slot-scope="{ row }">
                            <span>{{ format(row.time) || "暂无" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="交接班内容" width="180">
                        <template slot-scope="{ row }">
                            <span>{{ row.content || "暂无" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop=" time" align="right">
                        <template slot-scope="{ row }">
                            <el-button
                                v-if="
                                    new Date().getTime() -
                                        new Date(format(row.time)).getTime() <=
                                        86400000
                                "
                                type="primary"
                                @click="handleEdit1(row)"
                                >编辑</el-button
                            >
                            <el-button type="error" @click="view1(row)"
                                >查看</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </dz-dialog>
    </div>
</template>
<script>
import * as echarts from "echarts";

export default {
    data() {
        return {
            yhpcVisible: false,
            yhpcListVisible: false,
            yhpcType: "",
            yhpcForm: {
                time: "",
                person: "",
                place: "",
                coveryJob: "",
                situation: "",
                measure: "",
                summary: "",
            },
            yhpcData: [],
            jjbglVisible: false,
            jjbglListVisible: false,
            jjbglType: "",
            jjbglForm: {
                time: "",
                place: "",
                weather: "",
                handoverPerson: "",
                successor: "",
                content: "",
                finishSituation: "",
                importantThings: "",
            },
            jjbglData: [],
            weather: ["晴天", "阴天", "雨天", "雪天"],
            data: ["今日任务表", "本周任务表", "下周任务表"],
            active: 0,
            phoneMap: {
                麻超: "18726381965",
                张威: "17605695056",
                陈亮: "18505675311",
                温良哲: "18156838720",
                郑金海: "18096693835",
                郝陈: "18255122549",
                吴岳飞: "13696773496",
            },
            phoneMapMap: {
                0: "麻超",
                1: "张威",
                2: "陈亮",
                3: "温良哲",
                4: "郑金海",
                5: "郝陈",
                6: "吴岳飞",
            },
            dateMap: {
                "1月": 2,
                "2月": 2,
                "3月": 5,
                "4月": 5,
                "5月": 5,
                "6月": 5,
                "7月": 2,
                "8月": 2,
                "9月": 2,
                "10月": 2,
                "11月": 5,
                "12月": 2,
            },
            bookData: [
                "《关于行车中心开展三季度安全质量检查的通知》",
                "《关于全面做好有限空间作业摸排管理工作的通知》",
                "《市直889 关于印发《极端天气预警合肥市轨道交通运营应对方案》的通知》",
                "《关于组织学习《合肥市轨道交通集团有限公司突发事件综合预案》等预案的通知》",
                "《关于做好第5号台风“杜苏芮”防御工作的通知》",
                "《运营公司“无诈企业”创建工作活动方案》",
                "《关于持续加强运营公司安全生产隐患排查整改“夏季攻势行动”工作的通知》",
            ],
        };
    },
    computed: {
        PhoneMap() {
            let now = new Date();
            var year = now.getFullYear();

            // 获取月份（注意：月份从0开始，需要加1）
            var month = now.getMonth() + 1;
            // 获取日期
            var date = now.getDate();
            let str = `${year}-${month}-${date}`;
            let i, j;
            if (localStorage.getItem("data")) {
                let data = JSON.parse(localStorage.getItem("data"));
                if (data.str === str) {
                    [i, j] = data.arr;
                } else {
                    i = Math.floor(Math.random() * 7);
                    do {
                        j = Math.floor(Math.random() * 7);
                    } while (i === j);
                }
            } else {
                i = Math.floor(Math.random() * 7);
                do {
                    j = Math.floor(Math.random() * 7);
                } while (i === j);
            }
            localStorage.setItem(
                "data",
                JSON.stringify({
                    str,
                    arr: [i, j],
                })
            );

            return {
                [this.phoneMapMap[i]]: this.phoneMap[this.phoneMapMap[i]],
                [this.phoneMapMap[j]]: this.phoneMap[this.phoneMapMap[j]],
            };
        },
    },
    methods: {
        view(data) {
            this.yhpcVisible = true;
            this.yhpcListVisible = false;
            for (let key in this.yhpcForm) {
                this.yhpcForm[key] = data[key];
            }
            this.yhpcForm.id = data.id;
            this.yhpcType = "view";
        },
        handleEdit(data) {
            this.yhpcVisible = true;
            this.yhpcListVisible = false;
            for (let key in this.yhpcForm) {
                this.yhpcForm[key] = data[key];
            }
            this.yhpcForm.id = data.id;
            this.yhpcType = "edit";
        },
        view1(data) {
            this.jjbglVisible = true;
            this.jjbglListVisible = false;
            for (let key in this.jjbglForm) {
                this.jjbglForm[key] = data[key];
            }
            this.yhpcForm.id = data.id;
            this.jjbglType = "view";
        },
        handleEdit1(data) {
            this.jjbglVisible = true;
            this.jjbglListVisible = false;
            for (let key in this.jjbglForm) {
                this.jjbglForm[key] = data[key];
            }
            this.jjbglForm.id = data.id;
            this.jjbglType = "edit";
        },
        format(data) {
            const date = new Date(data);
            const formattedString = `${date.getFullYear()}-${(
                date.getMonth() + 1
            )
                .toString()
                .padStart(2, "0")}-${date
                .getDate()
                .toString()
                .padStart(2, "0")} ${date
                .getHours()
                .toString()
                .padStart(2, "0")}:${date
                .getMinutes()
                .toString()
                .padStart(2, "0")}`;
            return formattedString;
        },
        async create(type, data) {
            for (let key in this.yhpcForm) {
                if (!this.yhpcForm[key] && key !== "id") {
                    console.log(this.yhpcForm);
                    this.$message({
                        showClose: true,
                        message: "表单不能为空",
                        type: "error",
                    });
                    return;
                }
            }
            if (this.yhpcType === "create") {
                delete this.yhpcForm.id;
                const { data: res } = await this.$http.post(
                    "/services/app/TroubleshootingService/Create",
                    this.yhpcForm
                );
                window.location.reload();
            } else if (this.yhpcType === "edit") {
                const { data: res } = await this.$http.put(
                    "/services/app/TroubleshootingService/Update",
                    this.yhpcForm
                );
                window.location.reload();
            }
        },
        async create1() {
            for (let key in this.jjbglForm) {
                if (!this.jjbglForm[key] && key !== "id") {
                    this.$message({
                        showClose: true,
                        message: "表单不能为空",
                        type: "error",
                    });
                    return;
                }
            }
            if (this.jjbglType === "create") {
                const { data: res } = await this.$http.post(
                    "/services/app/ChangeShiftsService/Create",
                    this.jjbglForm
                );
                delete this.jjbglForm.id;
                window.location.reload();
            } else if (this.jjbglType === "edit") {
                const { data: res } = await this.$http.put(
                    "/services/app/ChangeShiftsService/Update",
                    this.jjbglForm
                );
                window.location.reload();
            }
        },
    },
    async mounted() {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option = (option = {
            legend: {
                data: ["新件", "返修件", "总数"], // 图例数据
                textStyle: {
                    color: "#fff", // 设置图例文本颜色
                },
            },
            tooltip: {},
            dataset: {
                dimensions: ["product", "新件", "返修件", "总数"],
                source: [
                    {
                        product: "2023-08",
                        新件: 43,
                        返修件: 85,
                        总数: 93,
                    },
                    {
                        product: "2023-09",
                        新件: 83,
                        返修件: 73,
                        总数: 55,
                    },
                    {
                        product: "2023-10",
                        新件: 86,
                        返修件: 65,
                        总数: 82,
                    },
                    {
                        product: "2023-11",
                        新件: 72,
                        返修件: 53,
                        总数: 39,
                    },
                ],
            },
            xAxis: {
                type: "category",
                axisLine: {
                    lineStyle: {
                        color: "#fff", // 设置x轴颜色为红色
                    },
                },
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#fff", // 设置x轴颜色为红色
                    },
                },
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {
                    type: "bar",
                    itemStyle: {
                        color: "#fcc4c8", // 设置第一系列柱状图的颜色
                    },
                },
                {
                    type: "bar",
                    itemStyle: {
                        color: "#aed9fc", // 设置第二系列柱状图的颜色
                    },
                },
                {
                    type: "bar",
                    itemStyle: {
                        color: "#c1d1f8", // 设置第三系列柱状图的颜色
                    },
                },
            ],
        });

        option && myChart.setOption(option);
        const { data } = await this.$http.get(
            "/services/app/TroubleshootingService/GetList"
        );
        this.yhpcData = data.result;
        this.yhpcData.sort((a, b) => {
            return new Date(b.time).getTime() - new Date(a.time).getTime();
        });

        const res = await this.$http.get(
            "/services/app/ChangeShiftsService/GetList"
        );
        this.jjbglData = res.data.result;
        this.jjbglData.sort((a, b) => {
            return new Date(b.time).getTime() - new Date(a.time).getTime();
        });
    },
};
</script>
<style scoped lang="less">
// background-color: #fff;
.table {
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0px;
    }
    /deep/ .el-input {
        input {
            background-color: #0a0a0a;
        }
    }
    /deep/ .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    /deep/ .el-table__row {
        background-color: var(--color) !important;
        &:hover {
            background-color: var(--color) !important;
        }
    }
    /deep/
        .el-table--enable-row-hover
        .el-table__body
        tr:hover
        > td.el-table__cell {
        background-color: var(--color) !important;
    }
    /deep/ .el-table__row:hover {
        background-color: var(--main-bgc);
    }
    /deep/ .el-table__header {
        background-color: var(--main-bgc) !important;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0px;
    }
    /deep/ .el-table__header-wrapper .el-table__cell {
        padding: 1px 0;
    }

    /deep/ .el-cascader {
        .el-input {
            input {
                background-color: var(--input-bgc);
            }
        }
        .el-input__inner::placeholder {
            color: var(--input-fc);
        }
    }

    /deep/ .el-table__header-wrapper .el-table__cell {
        padding: 1px 0;
        .cell {
            background-color: var(--main-bgc);
        }
    }
    .el-table {
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 5px;
    }
    /deep/ .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    /deep/ .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    /deep/ .el-cascader {
        .el-input {
            input {
                background-color: var(--input-bgc);
            }
        }
        .el-input__inner::placeholder {
            color: var(--input-fc);
        }
    }
    /deep/ .el-table__header-wrapper .el-table__cell {
        padding: 1px 0;
    }
    /deep/ .el-table thead {
        color: var(--main-fc);
        // background-color: red;
        tr {
            background-color: var(--main-bgc);
        }
    }
    /deep/ .cell {
        color: var(--main-fc);
    }
    /deep/ .el-table {
        border: none;
        padding: 0;
        background-color: var(--main-bgc);

        .el-table__row {
            border: none;
        }
        input {
            background-color: var(--input-bgc);
        }
        .el-input__inner::placeholder {
            color: var(--input-fc);
        }
        .el-table__body-wrapper {
            background-color: #323232 !important;
        }
        color: var(--main-fc);
    }
    /deep/ .el-table td.el-table__cell,
    /deep/ .el-table th.el-table__cell.is-leaf {
        // border-bottom: none;
        background: none;
    }
    /deep/ .el-table thead.is-group th.el-table__cell {
        background-color: var(--main-bgc);
    }
    /deep/ td.el-table__cell {
        background: var(--color) !important;
    }
    /deep/ .el-table /deep/ th.el-table__cell {
        background-color: var(--main-bgc) !important;
    }
    /deep/ .el-table tr {
        background-color: var(--main-bgc) !important;
    }
}
</style>

<style scoped lang="less">
.flex {
    display: flex;
    justify-content: center;
}
.dialog1 {
    width: 70vw;
    max-height: 100vh;
    background-color: #38658f;
    label {
        padding: 0.2344vw !important;
        background-color: #395f8c !important;
        border: 1px solid #82a9cf !important;
    }
    overflow: auto;
}
.dialog2 {
    width: 70vw;
    max-height: 100vh;
    background-color: #38658f;
    padding: 1.5813vw;
    box-sizing: border-box;
    label {
        padding: 0.2344vw !important;
        background-color: #395f8c !important;
        border: 1px solid #82a9cf !important;
    }
    overflow: auto;
    /deep/ .el-form-item__label {
        color: #fff;
    }
}
.common_header {
    height: 2.3438vw;
    display: flex;
    justify-content: right;
    align-items: center;
    .item {
        width: 3.3438vw;
        height: 1.3438vw;
        background-color: #a0d0f6;
        text-align: center;
        margin: 0 0.3813vw;
        line-height: 1.3438vw;
        border-radius: 0.3906vw;
    }
}
.workBoard {
    display: flex;
    height: 100%;
    .left {
        flex: 28.5;
        .left_left {
            box-sizing: border-box;
            padding: 0.5469vw;
            height: 100%;
            display: flex;
            flex-direction: column;
            .left_container_top {
                flex: 1;
                background-color: rgba(70, 95, 141, 0.8);
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                display: flex;
                flex-direction: column;
                .container_box {
                    display: flex;
                    flex: 1;
                    .left_container_top_left {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        .box_container {
                            flex: 1;
                            width: 100%;
                            padding: 0.7813vw;
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            .box_container_box {
                                background-color: #4e7bb2;
                                height: 6.8125vw;
                                width: 6.8125vw;
                                border-radius: 6.8125vw;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                .top {
                                    padding: 0.2344vw;
                                    text-align: center;
                                    border-bottom: 0.1563vw solid #64a1d8;
                                }
                                .bottom {
                                    text-align: center;
                                }
                            }
                        }
                    }
                    .left_container_top_center {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        .box_container {
                            flex: 1;
                            width: 100%;
                            padding: 0.7813vw;
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .box_container_box {
                                background-color: #4e7bb2;
                                height: 4.8125vw;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                border-radius: 0.7813vw;
                                .top {
                                    padding: 0.2344vw;
                                    text-align: center;
                                    border-bottom: 0.1563vw solid #64a1d8;
                                }
                                .bottom {
                                    text-align: center;
                                }
                            }
                        }
                    }
                    .left_container_top_right {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        .box_container {
                            flex: 1;
                            width: 100%;
                            padding: 0.7813vw;
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .box_container_box {
                                background-color: #4e7bb2;
                                height: 4.8125vw;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                border-radius: 0.7813vw;
                                .top {
                                    padding: 0.2344vw;
                                    text-align: center;
                                    border-bottom: 0.1563vw solid #64a1d8;
                                }
                                .bottom {
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
                .list {
                    height: 2.3438vw;
                    display: flex;
                    justify-content: center;

                    .list_item {
                        flex: 1;
                        text-align: center;
                        padding: 0.3906vw;
                    }
                    .active {
                        border-bottom: 0.1563vw solid #6083bb;
                    }
                    background-color: rgba(70, 95, 141, 0.8);
                }
            }

            .left_container_bottom {
                flex: 1;
                background-color: rgba(70, 95, 141, 0.8);
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .bottom {
                    flex: 1;
                    overflow: auto;
                    .table_header {
                        display: flex;
                        justify-content: space-around;
                        background-color: #4e7bb2;
                        div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .table_item {
                        display: flex;
                        justify-content: space-around;
                        background-color: #14171d;
                        div {
                            flex: 1;
                            display: flex;
                            text-align: center;
                            justify-content: center;
                            align-items: center;
                        }
                        .table_header_center {
                            height: 3.125vw;
                            overflow: auto;
                        }
                    }
                }
            }
        }
    }

    .center {
        flex: 26.5;
        .center_center {
            box-sizing: border-box;
            padding: 0.5469vw 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            .center_container_top {
                flex: 1;
                background-color: rgba(70, 95, 141, 0.8);
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .bottom {
                    flex: 1;
                    overflow: auto;
                    .table_header {
                        display: flex;
                        justify-content: space-around;
                        background-color: #4e7bb2;
                        div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .table_item {
                        display: flex;
                        justify-content: space-around;
                        background-color: #14171d;
                        div {
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        .table_header_right {
                            height: 3.125vw;
                            overflow: auto;
                        }
                    }
                }
            }
            .center_container_bottom {
                flex: 1;
                background-color: rgba(70, 95, 141, 0.8);
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
            }
        }
    }
    .right {
        flex: 45;
        .right_right {
            box-sizing: border-box;
            padding: 0.5469vw;
            height: 100%;
            display: flex;
            flex-direction: column;
            .right_container_top {
                flex: 1;
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                display: flex;
                flex-direction: column;
                .right_container_top_top_top {
                    flex: 1;
                    background-color: rgba(70, 95, 141, 0.8);
                    box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                    display: flex;
                    .right_container_top_left {
                        flex: 3;
                        margin-left: 0.7813vw;
                        .right_container_top_left_item {
                            font-size: 0.9375vw;
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                    .right_container_top_right {
                        flex: 8;
                        margin-left: 0.7813vw;
                        .table_header {
                            display: flex;
                            justify-content: space-around;
                            background-color: #4e7bb2;
                        }
                        .table_item {
                            display: flex;
                            justify-content: space-around;
                            background-color: #14171d;
                        }
                    }
                }
            }
            .right_container_bottom {
                margin-top: 0.3906vw;
                flex: 1;
                overflow: hidden;
                box-shadow: 0 0 0.1563vw 0.1563vw #0d092c;
                display: flex;
                .right_container_bottom_left {
                    flex: 1;
                    height: 100%;
                    margin-right: 0.5469vw;
                    .cvleft {
                        overflow: auto;
                        background-color: rgba(70, 95, 141, 0.8);
                    }
                }
                .right_container_bottom_right {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    height: 100%;
                    margin-left: 0.5469vw;
                    .right_container_bottom_right_container {
                        flex: 1;
                        background-color: rgba(70, 95, 141, 0.8);
                        overflow: auto;
                        .top_header {
                        }
                        .top_header_item {
                            display: flex;
                            height: 4.6875vw;
                            align-items: center;
                            .top_header_item_img {
                                height: 3.9063vw;
                                width: 3.9063vw;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            span {
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}
.header {
    width: 100%;
    font-weight: 500;
    font-size: 1.25vw;
    height: 2.3438vw;
    line-height: 2.3438vw;
    border-bottom: 0.1563vw solid #4b648b;
    margin-bottom: 0.3906vw;
}
.box {
    margin: 0.3906vw;
    width: 5.4688vw;
    text-align: center;
    font-size: 0.9375vw;
    border-radius: 0.7813vw;
    height: 1.8vw;
    line-height: 1.8vw;
    background-color: #a0d0f6;
}

.cvleft {
    height: 100%;
    overflow: auto;
    .cvleft_header {
        padding: 0.8vw 0.8vw;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 0.9375vw;
    }
    .tip_header {
        display: flex;
        flex-wrap: wrap;
        .tip_header_item {
            width: 50%;
            padding: 0.3906vw;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            span {
                margin-right: 0.3906vw;
                width: 0.7813vw;
                height: 0.7813vw;
                display: inline-block;
                content: "";
                border-radius: 0.2113vw;
            }
        }
        .tip_header_item:nth-child(1) {
            span {
                background-color: #409eff;
            }
        }

        .tip_header_item:nth-child(2) {
            span {
                background-color: #67c23a;
            }
        }

        .tip_header_item:nth-child(3) {
            span {
                background-color: #e6a23c;
            }
        }

        .tip_header_item:nth-child(4) {
            span {
                background-color: #f56c6c;
            }
        }
    }
    .cvleft_item {
        display: flex;
        margin: 0.3906vw;
        height: 7.8125vw;
        align-items: center;
        .cvleft_item_cvleft {
            width: 1.5625vw;
        }
        .cvleft_item_right {
            flex: 1;
        }
    }
}
</style>
